<template>
  <ElForm style="width: 300px">
    <ElFormItem label="物品标签">
      <ElInput v-model="materialDto.materialLabel" placeholder=""></ElInput>
    </ElFormItem>
    <ElFormItem label="物品价格">
      <ElInputNumber v-model="materialDto.suggestPrice" placeholder=""></ElInputNumber>
    </ElFormItem>
    <ElFormItem label="物品类型">
      <ElSelect v-model="materialDto.materialType" placeholder="">
        <ElOption value="tool" label="工具"></ElOption>
        <ElOption value="machine" label="设备"></ElOption>
        <ElOption value="consumable" label="消耗品"></ElOption>
      </ElSelect>
    </ElFormItem>
    <ElFormItem label="上传封面">
      <ElUpload :auto-upload="false" v-model:file-list="picFiles" :limit="1">
        <ElButton type="success">选择文件</ElButton>
      </ElUpload>
    </ElFormItem>

    <ElButton type="warning" @click="insert">新增</ElButton>
  </ElForm>
  <ElDivider> main </ElDivider>
  <ElForm inline>
    <ElFormItem label="label">
      <ElInput v-model="queryCondition.materialLabelLike" placeholder=""></ElInput>
    </ElFormItem>
    <ElFormItem label="types">
      <ElSelect v-model="queryCondition.materialTypes" multiple>
        <ElOption value="tool" label="工具"></ElOption>
        <ElOption value="machine" label="设备"></ElOption>
        <ElOption value="consumable" label="消耗品"></ElOption>
      </ElSelect>
    </ElFormItem>
    <ElFormItem>
      <ElButton type="primary" @click="() => queryByCondition(1)">搜索</ElButton>
    </ElFormItem>
  </ElForm>
  <ElTable :data="results">
    <ElTableColumn label="名称" prop="materialLabel"></ElTableColumn>
    <ElTableColumn label="code" prop="materialCode"></ElTableColumn>
    <ElTableColumn label="type" prop="materialType"></ElTableColumn>
    <ElTableColumn label="price" prop="suggestPrice"></ElTableColumn>

    <ElTableColumn label="photo">
      <template #default="{ row }">
        <!-- <div>{{ row.picUrl }}</div> -->
        <div style="height: 60px; width: 60px">
          <img
            style="object-fit: contain; width: 100%; height: 100%"
            :src="'http://localhost:9090/static/pic/' + row.picUrl"
          />
        </div>
      </template>
    </ElTableColumn>
  </ElTable>
  <ElPagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="queryCondition.pageSize"
    :current-page="queryCondition.pageNum"
    @current-change="queryByCondition"
  />
  <ElDivider>--card--</ElDivider>
  <ElRow>
    <template v-for="(row, i) in results" :key="i">
      <ElCol :span="6">
        <div style="display: flex; align-items: center; justify-content: center; padding: 10px 0">
          <ElCard>
            <template #header>
              <div style="width: 200px; height: 200px">
                <img
                  style="object-fit: cover; width: 100%; height: 100%"
                  :src="'http://localhost:9090/static/pic/' + row.picUrl"
                />
              </div>
            </template>
            <div style="background-color: bisque; min-height: 40px">
              <div style="display: flex; align-items: center; justify-content: space-between">
                <div>{{ row.materialLabel }}</div>
                <ElTag effect="plain" type="success">{{ row.materialType }}</ElTag>
              </div>
              <div style="color: red">{{ row.materialCode }}</div>
              <div>指导价格：{{ row.suggestPrice.toFixed(2) }}</div>
            </div>
          </ElCard>
        </div>
      </ElCol>
    </template>
  </ElRow>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

import { defineComponent } from 'vue'
import axios from 'axios'
import { ElMessage, ElSelect } from 'element-plus'
export default defineComponent({
  name: 'GoodsView',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      materialDto: {
        materialLabel: '',
        suggestPrice: 0,
        materialType: '',
        pic: null
      },
      picFiles: [],
      queryCondition: {
        pageNum: 1,
        pageSize: 5,
        materialTypes: [],
        materialLabelLike: ''
      },
      total: 0,
      results: []
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.queryByCondition(1)
  },
  methods: {
    // sampleM() {},
    async insert() {
      if (!this.picFiles[0]) {
        ElMessage.warning('至少上传一张图片')
        return
      }
      // console.log(this.materialDto)
      // console.log(this.picFiles)
      // console.log('待上传的文件', this.picFiles[0].raw)
      const fd = new FormData()
      fd.append('materialLabel', this.materialDto.materialLabel)
      fd.append('suggestPrice', this.materialDto.suggestPrice.toFixed(2))
      fd.append('materialType', this.materialDto.materialType)
      fd.append('pic', this.picFiles[0].raw)
      const res = await axios({
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        method: 'post',
        url: 'http://localhost:9090/material/insert',
        data: fd
      })
      console.log(res.data)
      ElMessage.success('新增成功')
      await this.queryByCondition(1)
    },
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      const res = await axios({
        method: 'post',
        url: 'http://localhost:9090/material/query',
        data: this.queryCondition
      })
      this.total = res.data.total
      this.results = res.data.records
    }
  },
  watch: {
    // sampleP(n, o) {},
  },
  components: { ElSelect }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
